<template>
    <el-drawer
      v-model="dialogFormVisible"
      :title="dialogTitle"
      size="80%"
      @close="handleClose"
    >
      <el-form
        :model="formData"
        ref="formRef"
        :rules="rules"
        label-position="right"
        label-width="80px"
        size="default"
        :scroll-to-error="true"
        :show-message="false"
      >
        <el-form-item
          label="选择模板"
          prop="tpl_id"
          class="required label-right-align"
          label-width="120px"
        >
            <el-select
                v-model="formData.tpl_id"
                placeholder="请选择模板"
                aria-label="请选择模板"
                style="width: 100%"
            >
                <el-option
                    v-for="item in tpl_list"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item
            label="选择用户"
            prop="user_id"
            class="label-right-align"
            label-width="120px"
            :disabled="formData.user_id"
            required
        >
            <el-select
            v-model="formData.user_id"
            filterable
            remote
            placeholder="输入用户ID/昵称/姓名/手机号进行搜索"
            remote-show-suffix
            :remote-method="searchUser"
            :loading="search_loading"
            style="width: 240px"
            default-first-option
            >
            <el-option
                v-for="item in userOptions"
                :key="item.user_id"
                :label="item.real_name ? item.real_name : item.nickName"
                :value="item.user_id"
            />
            </el-select>
        </el-form-item>
        <el-form-item
          label="内容"
          prop="content"
          class="required label-right-align"
          label-width="120px"
        >
        <Uediter
            :text="formData.content"
            :config="ueditor.config"
            ref="ue"
            @contentChange="contentChangeFunc"
          ></Uediter>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogClose">关闭</el-button>
          <el-button type="primary" @click="submitForm"> 提交 </el-button>
        </div>
      </template>
    </el-drawer>
  </template>
  
  <script setup lang="ts">
  import { ref, reactive, defineExpose, defineEmits, onMounted, watch } from "vue";
  import { ElMessage } from "element-plus";
  import Uediter from "@/components/UE.vue";
  import { getUserOption } from "@/api/user";
  import { addContractApi, getTplListAPi } from "@/api/contract/contract";
  const dialogFormVisible = ref(false);
  const formRef = ref(null);
  const search_loading = ref(false);
    const userOptions = ref<any[]>([]);
    const tpl_list = ref<any[]>([]);
  const dialogTitle = ref("");
  const ue = ref<any>(null);
  /*富文本框配置*/
  const ueditor = ref({
    text: "",
    config: {
      initialFrameWidth: 800,
      initialFrameHeight: 400,
    },
  });
  const props = defineProps({
    department: {
      type: Array,
      default: [] as any[],
    },
    classList: {
      type: Array,
      default: [] as any[],
    },
  });
  const formData = ref({
    tpl_id: 0,
    user_id: "",
    content: "",
  });
  
  const rules = reactive({
    tpl_id: [
      {
        required: true,
        message: "请选择模板",
      },
    ],
    user_id: [
      {
        required: true,
        message: "请选择用户",
      },
    ],
    content: [
      {
        required: true,
        message: "请输入内容",
      },
    ],
  });
  
  const emits = defineEmits(["getTable"]);
  const contentChangeFunc = (e) => {
    formData.value.content = e;
  };
  function submitForm() {
    formRef.value.validate().then(() => {
        addContractApi(formData.value)
      .then((res) => {
        ElMessage.success("添加成功");
        emits("getTable");
        dialogClose();
      })
      .catch((err) => {});
    });
  }
  
  const dialogClose = () => {
    dialogFormVisible.value = false;
  };
  
  const dialogOpen = (id: number) => {
    dialogFormVisible.value = true;
    dialogTitle.value = "添加合同";
  };
  
  const handleClose = () => {
    formRef.value.resetFields();
    formData.value = {
        tpl_id: 0,
        user_id: "",
        content: "",
    };
    dialogFormVisible.value = false;
  };
  const searchUser = (query: string) => {
  if (query !== "") {
    search_loading.value = true;
    getUserOption({
      keyword: query,
    }).then((res: any) => {
      if (res.code == 1) {
        userOptions.value = res.data;
        search_loading.value = false;
      }
    });
  } else {
    userOptions.value = [];
  }
};
  onMounted(()=>{
    getTplListAPi().then((res: any) => {
        tpl_list.value = res.data.data;
    });
  })
  watch(()=>formData.value.tpl_id, (newVal)=>{
    if (newVal) {
      let tpl = tpl_list.value.find((item) => item.id == newVal);
      formData.value.content = tpl.content;
      ue.value.setContent(tpl.content);
    } else {
      userOptions.value = [];
    }
  })
  defineExpose({
    dialogOpen,
  });
  </script>
  
  <style lang="scss">
  .el-form-item {
    margin-bottom: 10px;
  }
  </style>
  
  <style lang="scss" scoped></style>
  